<template>
  <el-select
    :clearable="clearable"
    :value="value"
    :filterable="filterable"
    :size="size"
    style="width: 100%"
    :multiple="multiple"
    :disabled="disabled"
    :placeholder="placeholder"
    @change="change"
  >
    <el-option
      v-for="d in dataOfVarient"
      :key="d.value"
      :label="d.label ? d.label : d.value"
      :value="d.value"
    ></el-option>
  </el-select>
</template>

<script>
/**
 * 枚举自动生成element ui Select组件
 */
import constants from "@/plugins/constants";

export default {
  name: "StaticSelect",
  props: {
    /**
     * 类型
     * 对应constants里每一个object的key值
     */
    varient: { type: String, required: true },
    /**
     * 初始值
     */
    value: { type: [String, Number, Array], default: "" },
    /**
     * @ignore
     * 详见element ui
     */
    disabled: { type: Boolean, default: false },
    /**
     * @ignore
     * 详见element ui
     */
    multiple: { type: Boolean, default: false },
    clearable: { type: Boolean, default: false },
    placeholder: { type: String, default: "" },
    filterable: { type: Boolean, default: false },
    replace: { type: Array, default: () => [] },
    size: {
      type: String,
      default: "small",
    },
  },
  computed: {
    dataOfVarient: function () {
      return constants[this.varient].filter(
        (value) =>
          !this.replace.includes(value.label) &&
          !this.replace.includes(value.value)
      );
    },
  },
  methods: {
    change(value) {
      const data = constants[this.varient].filter((val) => val.value === value);
      let object = {};
      if (data.length > 0) {
        object = data[0];
      }
      this.$emit("input", value);
      this.$emit("change", object);
    },
  },
};
</script>
